<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Demo登录</title>
    <script src="/webjars/bootstrap/3.3.7/js/bootstrap.js" type="text/javascript" rel="script"></script>
    <script src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script src="/webjars/axios/0.19.0/dist/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/3.3.7/css/bootstrap.css"/>
    <script src="/webjars/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<div id="vuebox">
    <form class="form-horizontal" role="form">
        <div class="form-group" style="text-align: center">
            <label for="username" class="col-sm-2 control-label">帐号</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="loginForm.username" style="width: 50%" id="username" placeholder="请输入帐号">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="loginForm.password" style="width: 50%" id="password" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" @click="login()">登录</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#vuebox",
        data:{
            loginForm:{
                username:"",
                password:""
            }
        },
        methods:{
            login:function () {
                axios.post("http://localhost:9999/login",this.loginForm).then(res=>{
                    if (res.data.code=="200"){
                        sessionStorage.clear();
                        sessionStorage.setItem("token",res.data.data.token);
                        sessionStorage.setItem("username",res.data.data.username);
                        sessionStorage.setItem("role",res.data.data.role);
                        window.location.href="/main.html";
                    }else{
                        alert("登录失败")
                    }
                })
            }
        }
    })
</script>